<template>
  <div class="character-page" @click.stop="closeDescClick">
    <div class="pc">
      <div class="c-p-top">
        <img :src="images.title" />
      </div>

      <div class="c-p-center">
        <!-- left big image -->
        <transition name="fade">
          <div class="center-left" v-if="!isAnimation">
            <img id="cartoons_big" :src="cartoons_big[currentIndex].image" />
          </div>
        </transition>

        <!-- right info content -->
        <div class="center-right">
          <transition name="fade_desc">
            <div class="c-r-desc-box" v-show="!isAnimation">
              <div class="c-r-tip">{{ cartoons_small[currentIndex].tip }}</div>
              <div class="c-r-title">
                {{ cartoons_small[currentIndex].title }}
              </div>
              <div class="c-r-title-line"></div>
              <div class="c-r-desc">
                {{ cartoons_small[currentIndex].desc }}
              </div>
            </div>
          </transition>

          <!-- swiper -->
          <div class="c-r-swiper">
            <!-- swiper left button -->
            <div class="arrow-left">
              <img v-if="currentIndex === 0" :src="images.arrow_empty_left" />
              <img v-else @click="prevClick" :src="images.arrow_full_left" />
            </div>

            <!-- swiper box -->
            <div class="swiper-box">
              <swiper class="swiper" ref="mySwiper" :options="swiperOptions">
                <swiper-slide
                  v-for="(item, index) in cartoons_small"
                  :key="index"
                >
                  <img
                    v-if="index === currentIndex"
                    class="swiper_img"
                    :src="cartoons_small_active[index].image"
                  />
                  <img
                    v-else
                    @click="changeCurrentIndex(index)"
                    class="swiper_img"
                    :src="item.image"
                  />
                </swiper-slide>
              </swiper>
            </div>

            <!-- swiper right button -->
            <div class="arrow-right">
              <img
                v-if="currentIndex === cartoons_small.length - 1"
                :src="images.arrow_empty_right"
              />
              <img v-else @click="nextClick" :src="images.arrow_full_right" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mobile">
      <div class="c-p-top">
        <img :src="images.title" v-if="images.title" />
      </div>

      <div class="c-p-center">
        <!-- left big image -->
        <transition name="fade">
          <div class="center-left" v-if="!isAnimation">
            <img id="cartoons_big" :src="cartoons_big[currentIndex].image" />
          </div>
        </transition>

        <!-- right info content -->
        <transition name="fade_m_desc">
          <div
            id="centerRight"
            class="center-right"
            :class="{ 'center-right-show': isShowDesc }"
            v-show="!isAnimation"
          >
            <div class="c-r-desc-box" v-show="!isAnimation">
              <div class="c-r-tip">{{ cartoons_small[currentIndex].tip }}</div>
              <div class="c-r-title">
                {{ cartoons_small[currentIndex].title }}
              </div>
              <div class="c-r-title-line"></div>
              <div class="c-r-desc">
                {{ cartoons_small[currentIndex].desc }}
              </div>
              <div class="c-r-arrow" @click.stop="showDescClick">
                <img v-if="!isShowDesc" :src="images.arrow_left" />
                <img v-else :src="images.arrow_right" />
              </div>
            </div>
          </div>
        </transition>
      </div>

      <div class="c-p-bottom">
        <div class="c-r-swiper">
          <div class="arrow-left">
            <img v-if="currentIndex === 0" :src="images.arrow_empty_left" />
            <img v-else @click="prevClick" :src="images.arrow_full_left" />
          </div>

          <div class="swiper-box">
            <swiper
              class="swiper"
              ref="mySwiper"
              :options="swiperOptions"
              v-if="isPhone"
            >
              <swiper-slide
                v-for="(item, index) in cartoons_small"
                :key="index"
              >
                <img
                  v-if="index === currentIndex"
                  class="swiper_img"
                  :src="cartoons_small_active[index].image"
                />
                <img
                  v-else
                  @click="changeCurrentIndex(index)"
                  class="swiper_img"
                  :src="item.image"
                />
              </swiper-slide>
            </swiper>
          </div>

          <div class="arrow-right">
            <img
              v-if="currentIndex === cartoons_small.length - 1"
              :src="images.arrow_empty_right"
            />
            <img v-else @click="nextClick" :src="images.arrow_full_right" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
import { isPhone } from "@/utils";

export default {
  name: "CharacterPage",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      // static
      images: {
        title: require("@/assets/images/character/character_title.png"),
        arrow_empty_left: require("@/assets/images/character/character_arrow_empty_left.png"),
        arrow_empty_right: require("@/assets/images/character/character_arrow_empty_right.png"),
        arrow_full_left: require("@/assets/images/character/character_arrow_full_left.png"),
        arrow_full_right: require("@/assets/images/character/character_arrow_full_right.png"),
        arrow_left: require("@/assets/images/character/character_arrow_left.png"),
        arrow_right: require("@/assets/images/character/character_arrow_right.png"),
      },
      cartoons_big: [
        {
          id: 1,
          image: require("@/assets/images/character/character_cartoon_big1.png"),
        },
        {
          id: 2,
          image: require("@/assets/images/character/character_cartoon_big2.png"),
        },
        {
          id: 3,
          image: require("@/assets/images/character/character_cartoon_big3.png"),
        },
        {
          id: 4,
          image: require("@/assets/images/character/character_cartoon_big4.png"),
        },
        {
          id: 5,
          image: require("@/assets/images/character/character_cartoon_big5.png"),
        },
        {
          id: 6,
          image: require("@/assets/images/character/character_cartoon_big6.png"),
        },
        {
          id: 7,
          image: require("@/assets/images/character/character_cartoon_big7.png"),
        },
        {
          id: 8,
          image: require("@/assets/images/character/character_cartoon_big8.png"),
        },
        {
          id: 9,
          image: require("@/assets/images/character/character_cartoon_big9.png"),
        },
        {
          id: 10,
          image: require("@/assets/images/character/character_cartoon_big10.png"),
        },
        {
          id: 11,
          image: require("@/assets/images/character/character_cartoon_big11.png"),
        },
        {
          id: 12,
          image: require("@/assets/images/character/character_cartoon_big12.png"),
        },
        {
          id: 13,
          image: require("@/assets/images/character/character_cartoon_big13.png"),
        },
        {
          id: 14,
          image: require("@/assets/images/character/character_cartoon_big14.png"),
        },
        {
          id: 15,
          image: require("@/assets/images/character/character_cartoon_big15.png"),
        },
        {
          id: 16,
          image: require("@/assets/images/character/character_cartoon_big16.png"),
        },
        {
          id: 17,
          image: require("@/assets/images/character/character_cartoon_big17.png"),
        },
        {
          id: 18,
          image: require("@/assets/images/character/character_cartoon_big18.png"),
        },
        {
          id: 19,
          image: require("@/assets/images/character/character_cartoon_big19.png"),
        },
        {
          id: 20,
          image: require("@/assets/images/character/character_cartoon_big20.png"),
        },
      ],
      cartoons_small: [
        {
          id: 1,
          tip: "LEAD",
          title: "King",
          desc: "15 years old, from Dengue Star, strong personality, optimistic and cheerful, value partners. Meta power skills - Vector arrow, the competition ranking No. 3968 (anime season 1 at the end of the defeat of ghost fox days into the top 100.)",
          image: require("@/assets/images/character/character_cartoon_small1.png"),
        },
        {
          id: 2,
          tip: "LEAD",
          title: "Grey",
          desc: "17 years old, the son of the patriarch of the Watchtower clan, I do what I want, with strong beliefs and strong action. Elemental power skills - Fierce chop, the competition ranked No. 2",
          image: require("@/assets/images/character/character_cartoon_small2.png"),
        },
        {
          id: 3,
          tip: "LEAD",
          title: "Kalie",
          desc: "15 years old, grew up in the infernal hell, capricious and arrogant, like to play tricks on people. Yuan power skill - Moon blade, ranked No.101 in the competition.",
          image: require("@/assets/images/character/character_cartoon_small3.png"),
        },
        {
          id: 4,
          tip: "LEAD",
          title: "Shido Phantom-S",
          desc: "He is 17 years old, the second son of Shido family, kind and gentle, sensitive inside, and very extreme after blackening. Gen-power skills - Summon, the competition ranking does not explain (the anime season 1 at the end of the acceptance of the Ghost Heaven League cadres before death entrusted points to advance)",
          image: require("@/assets/images/character/character_cartoon_small4.png"),
        },
        // {
        //   id: 5,
        //   tip: "LEAD",
        //   title: "GOLD5",
        //   desc: "A 19-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small5.png"),
        // },
        // {
        //   id: 6,
        //   tip: "LEAD",
        //   title: "GOLD6",
        //   desc: "A 18-year-old guy from denglu, who dares to think and do and has good luck",
        //   image: require("@/assets/images/character/character_cartoon_small6.png"),
        // },
        // {
        //   id: 7,
        //   tip: "LEAD",
        //   title: "GOLD7",
        //   desc: "A 17-year-old guy from denglu",
        //   image: require("@/assets/images/character/character_cartoon_small7.png"),
        // },
        // {
        //   id: 8,
        //   tip: "LEAD",
        //   title: "GOLD8",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small8.png"),
        // },
        // {
        //   id: 9,
        //   tip: "LEAD",
        //   title: "GOLD9",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small9.png"),
        // },
        // {
        //   id: 10,
        //   tip: "LEAD",
        //   title: "GOLD10",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small10.png"),
        // },
        // {
        //   id: 11,
        //   tip: "LEAD",
        //   title: "GOLD11",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small11.png"),
        // },
        // {
        //   id: 12,
        //   tip: "LEAD",
        //   title: "GOLD12",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small12.png"),
        // },
        // {
        //   id: 13,
        //   tip: "LEAD",
        //   title: "GOLD13",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small13.png"),
        // },
        // {
        //   id: 14,
        //   tip: "LEAD",
        //   title: "GOLD14",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small14.png"),
        // },
        // {
        //   id: 15,
        //   tip: "LEAD",
        //   title: "GOLD15",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small15.png"),
        // },
        // {
        //   id: 16,
        //   tip: "LEAD",
        //   title: "GOLD16",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small16.png"),
        // },
        // {
        //   id: 17,
        //   tip: "LEAD",
        //   title: "GOLD17",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small17.png"),
        // },
        // {
        //   id: 18,
        //   tip: "LEAD",
        //   title: "GOLD18",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small18.png"),
        // },
        // {
        //   id: 19,
        //   tip: "LEAD",
        //   title: "GOLD19",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small19.png"),
        // },
        // {
        //   id: 20,
        //   tip: "LEAD",
        //   title: "GOLD20",
        //   desc: "A 16-year-old guy from denglu, who dares to think and do and has good luck, participates in the bump contest in order to find his sister and change denglu",
        //   image: require("@/assets/images/character/character_cartoon_small20.png"),
        // },
      ],
      cartoons_small_active: [
        {
          id: 1,
          image: require("@/assets/images/character/character_cartoon_small_active1.png"),
        },
        {
          id: 2,
          image: require("@/assets/images/character/character_cartoon_small_active2.png"),
        },
        {
          id: 3,
          image: require("@/assets/images/character/character_cartoon_small_active3.png"),
        },
        {
          id: 4,
          image: require("@/assets/images/character/character_cartoon_small_active4.png"),
        },
        {
          id: 5,
          image: require("@/assets/images/character/character_cartoon_small_active5.png"),
        },
        {
          id: 6,
          image: require("@/assets/images/character/character_cartoon_small_active6.png"),
        },
        {
          id: 7,
          image: require("@/assets/images/character/character_cartoon_small_active7.png"),
        },
        {
          id: 8,
          image: require("@/assets/images/character/character_cartoon_small_active8.png"),
        },
        {
          id: 9,
          image: require("@/assets/images/character/character_cartoon_small_active9.png"),
        },
        {
          id: 10,
          image: require("@/assets/images/character/character_cartoon_small_active10.png"),
        },
        {
          id: 11,
          image: require("@/assets/images/character/character_cartoon_small_active11.png"),
        },
        {
          id: 12,
          image: require("@/assets/images/character/character_cartoon_small_active12.png"),
        },
        {
          id: 13,
          image: require("@/assets/images/character/character_cartoon_small_active13.png"),
        },
        {
          id: 14,
          image: require("@/assets/images/character/character_cartoon_small_active14.png"),
        },
        {
          id: 15,
          image: require("@/assets/images/character/character_cartoon_small_active15.png"),
        },
        {
          id: 16,
          image: require("@/assets/images/character/character_cartoon_small_active16.png"),
        },
        {
          id: 17,
          image: require("@/assets/images/character/character_cartoon_small_active17.png"),
        },
        {
          id: 18,
          image: require("@/assets/images/character/character_cartoon_small_active18.png"),
        },
        {
          id: 19,
          image: require("@/assets/images/character/character_cartoon_small_active19.png"),
        },
        {
          id: 20,
          image: require("@/assets/images/character/character_cartoon_small_active20.png"),
        },
      ],
      // swiper
      swiperOptions: {},
      // active
      currentIndex: 0,
      // flag
      isAnimation: false,
      isPhone: false,
      isShowDesc: false,
      // timer
      timer: null,
      clickTimer: null,
    };
  },
  methods: {
    // change current swiper image active index
    changeCurrentIndex(index) {
      if (this.currentIndex === index) return;
      if (this.timer) return;

      this.isAnimation = true;
      this.timer = setTimeout(() => {
        this.isAnimation = false;
        this.timer = null;

        this.currentIndex = index;
      }, 200);
    },
    // btn prev
    prevClick() {
      if (this.clickTimer) return;
      if (this.currentIndex === 0) return;
      if (this.timer) {
        return;
      } else {
        this.isAnimation = true;
        this.timer = setTimeout(() => {
          this.isAnimation = false;
          this.timer = null;
          if (this.currentIndex % 4 === 0) {
            // this.$refs.mySwiper.swiper.slideTo(this.currentIndex - 1, 0);
            this.$refs.mySwiper.swiper.slidePrev();
          }
          this.currentIndex--;
        }, 350);

        this.clickTimer = setTimeout(() => {
          this.clickTimer = null;
        }, 500);
      }
    },
    // btn next
    nextClick() {
      if (this.clickTimer) return;
      if (this.currentIndex === this.cartoons_small.length + 1) return;
      if (this.timer) {
        return;
      } else {
        this.isAnimation = true;
        this.timer = setTimeout(() => {
          this.isAnimation = false;
          this.timer = null;
          if ((this.currentIndex + 1) % 4 === 0) {
            // this.$refs.mySwiper.swiper.slideTo(this.currentIndex + 1, 0);
            this.$refs.mySwiper.swiper.slideNext();
          }
          this.currentIndex++;
        }, 350);

        this.clickTimer = setTimeout(() => {
          this.clickTimer = null;
        }, 500);
      }
    },
    // btn show desc
    showDescClick() {
      this.isShowDesc = !this.isShowDesc;
    },
    closeDescClick(e) {
      var el = document.getElementById("centerRight");
      if (el && !el.contains(e.target)) {
        this.isShowDesc = false;
      }
    },
  },
  created() {
    this.isPhone = isPhone();

    // const that = this;
    this.swiperOptions = {
      slidesPerView: 4,
      // slidesPerView: "auto",
      slidesPerGroup: 4,
      observer: true,
      observeParents: true,
      observeSlideChildren: true,
      // spaceBetween: 15,
      autoplay: false,
      allowTouchMove: false,
      // enabled: false,
      // simulateTouch: false,
      // updateTranslate: true,
      // touchRatio: 1,
      // shortSwipes: false,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      // on: {
      //   slidePrevTransitionEnd() {
      //     that.currentIndex = this.activeIndex + 3;
      //   },
      //   slideNextTransitionEnd() {
      //     if (that.currentIndex >= 12 && that.currentIndex <= 16) {
      //       that.currentIndex = 16;
      //     } else {
      //       that.currentIndex = this.activeIndex;
      //     }
      //   },
      // },
    };
  },
};
</script>

<style lang="less" scoped>
.character-page {
  position: relative;
  width: 100%;
  height: 1080px;
  background-image: url("../../assets/images/character/character_background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin-top: -21px;
  z-index: 6;
  user-select: none;

  .mobile {
    display: none;
  }
  .pc {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;

    // story page top
    .c-p-top {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top: 120px;

      img {
        display: block;
        width: 654px;
      }
    }

    // story page center
    .c-p-center {
      display: flex;
      width: 1200px;
      margin-top: 110px;

      .center-left {
        position: relative;
        width: 520px;
        height: 588px;
        font-size: 0;

        img {
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 620px;
          height: 815px;
        }
      }

      .center-right {
        position: relative;
        width: 680px;

        .c-r-tip {
          display: inline-block;
          position: relative;
          min-width: 92px;
          height: 30px;
          background: linear-gradient(
            135deg,
            transparent 7px,
            rgba(255, 255, 255, 0.3) 0
          );
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          text-align: center;
          line-height: 30px;
          margin-top: 64px;
          margin-left: 90px;
        }

        .c-r-title {
          font-size: 40px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 40px;
          margin-top: 40px;
          margin-left: 90px;
        }

        .c-r-title-line {
          width: 66px;
          height: 4px;
          background: #ffffff;
          margin-top: 20px;
          margin-left: 90px;
        }

        .c-r-desc {
          width: 460px;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 24px;
          margin-top: 40px;
          margin-left: 90px;
        }

        .c-r-desc::-webkit-scrollbar {
          // display: none;
          width: 5px;
          border-radius: 3px;
        }
        .c-r-desc::-webkit-scrollbar-track {
          border-radius: 3px;
          background: rgba(0, 0, 0, 0.1);
        }
        .c-r-desc::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background: #41e6f6;
        }

        .c-r-swiper {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          box-sizing: border-box;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 125px;

          .arrow-left,
          .arrow-right {
            margin: 0;
            padding: 0;

            img {
              width: 35px;
              height: 60px;
              cursor: pointer;
            }
          }

          .swiper-box {
            padding: 0;
            margin: 0;
            width: 540px;
            height: 100%;

            .swiper_img {
              display: block;
              width: 130px;
              cursor: pointer;
              transition: all 0.3s ease;
            }
          }
        }
      }
    }
  }

  // animate
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.4s ease;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    // transform: scale(0.4);
    transform: translateX(-100px);
  }

  .fade_desc-enter-active,
  .fade_desc-leave-active {
    transition: all 0.4s ease;
  }
  .fade_desc-enter,
  .fade_desc-leave-to {
    opacity: 0;
  }

  .fade_m_desc-enter-active,
  .fade_m_desc-leave-active {
    transition: all 0.4s ease;
  }
  .fade_m_desc-enter,
  .fade_m_desc-leave-to {
    transform: translateX(96vw);
  }

  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

@media screen and (max-width: 768px) {
  .character-page {
    height: 154.6667vw;
    width: 100%;
    background-image: url("../../assets/images/character/m_character_background.png");
    margin: 0;
    overflow: hidden;

    .pc {
      display: none;
    }

    .mobile {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;

      .c-p-top {
        margin: 0 auto;
        margin-top: 6.9333vw;

        img {
          width: 87.5093vw;
        }
      }

      .c-p-center {
        position: relative;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        height: 107.7333vw;
        margin-top: 5.3333vw;

        .center-left {
          position: absolute;
          top: 0;
          left: 5.3333vw;
          img {
            display: block;
            width: 71.6vw;
          }
        }

        .center-right {
          position: absolute;
          right: -50.9333vw;
          bottom: 0;
          width: 96vw;
          height: 46.6667vw;
          background: rgba(0, 0, 0, 0.2);
          backdrop-filter: blur(30px);
          box-sizing: border-box;
          padding-left: 10.6667vw;
          z-index: 1;
          transition: all 0.5s ease;

          .c-r-tip {
            display: inline-block;
            min-width: 17.7333vw;
            height: 6.1333vw;
            background: linear-gradient(
              135deg,
              transparent 0.9333vw,
              rgba(255, 255, 255, 0.3) 0
            );
            font-size: 3.2vw;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            text-align: center;
            line-height: 6.1333vw;
            margin-top: 4.2667vw;
          }

          .c-r-title {
            font-size: 6.9333vw;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            line-height: 10.6667vw;
            margin-top: 0.5333vw;
          }

          .c-r-title-line {
            width: 16vw;
            height: 0.8vw;
            background: #ffffff;
          }

          .c-r-desc {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 19.2vw;
            font-size: 3.7333vw;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 4.8vw;
            margin-top: 2.6667vw;
            overflow: auto;
          }

          .c-r-desc::-webkit-scrollbar {
            // display: none;
            width: 5px;
            border-radius: 3px;
          }
          .c-r-desc::-webkit-scrollbar-track {
            border-radius: 3px;
            background: rgba(0, 0, 0, 0.1);
          }
          .c-r-desc::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background: #41e6f6;
          }

          .c-r-arrow {
            position: absolute;
            left: 2.6667vw;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0;

            img {
              display: block;
              width: 3.2vw;
              height: 5.3333vw;
            }
          }
        }

        .center-right-show {
          right: 0;
        }
      }

      .c-p-bottom {
        position: absolute;
        left: 50%;
        bottom: 5.3333vw;
        transform: translateX(-50%);
        box-sizing: border-box;
        width: 100%;
        height: 20.6667vw;

        .c-r-swiper {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          box-sizing: border-box;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          padding: 0 5.3333vw;

          .arrow-left,
          .arrow-right {
            margin: 0;
            padding: 0;
            margin-bottom: 0.8vw;

            img {
              width: 4.8vw;
            }
          }

          .swiper-box {
            width: 72vw;

            .swiper_img {
              width: 17.3333vw;
            }
          }
        }
      }
    }
  }
}
</style>
